// https://taro-ext.jd.com/plugin/view/5d394d3a9b6a1d4027780173
import React, { useEffect, useState } from "react";
import Taro, {
  useReachBottom,
  usePullDownRefresh,
  useRouter,
  useDidShow,
} from "@tarojs/taro";
import { View, Image, Text } from "@tarojs/components";
import { GoodsItemData } from "@/components/GoodsItem/data";
import GoodsItem from "@/components/GoodsItem";
import ListStatusInfo from "@/components/ListStatusInfo";
import { AtSwipeAction } from "taro-ui";
import "taro-ui/dist/style/components/swipe-action.scss"; // 按需引入

import * as api from "./api";
import "./index.scss";

const Index: React.FC<{}> = () => {
  const [data, setData] = useState<any>({});
  const [loading, setLoading] = useState(false);
  const [isOpen, setIsOpen] = useState(false);
  const [activeKey, setActiveKey] = useState("all");
  const router = useRouter();
  const [tabMap, setTabMap] = useState<any>({
    all: {
      text: "全部订单",
      total: null,
      current: null,
      data: [],
      isShow: true,
      isLoaded: false,
    },
  });

  const getList = async (current_page = 1) => {
    try {
      setLoading(true);
      Taro.showNavigationBarLoading();
      const { result, status } = await api.customer_collection_search({
        search_info: JSON.stringify({
          status: activeKey === "all" ? undefined : activeKey,
        }),
        current_page: current_page,
      });

      console.log("result---->>", result);
      if (status === "ok") {
        const newTabMap = { ...tabMap };
        newTabMap[activeKey].current = current_page;
        newTabMap[activeKey].isLoaded = true;
        newTabMap[activeKey].data =
          current_page === 1
            ? [].concat(result.data_list)
            : newTabMap[activeKey].data.concat(result.data_list);
        newTabMap[activeKey].total = result.total;
        setTabMap(newTabMap);
      }
    } catch (err) {
      console.log("err--------->>>", err);
    } finally {
      Taro.hideNavigationBarLoading();
      Taro.stopPullDownRefresh();
      setLoading(false);
    }
  };

  useReachBottom(() => {
    if (tabMap[activeKey].data.length < tabMap[activeKey].total) {
      getList(tabMap[activeKey].current + 1);
    }
  });

  usePullDownRefresh(() => {
    getList(1);
  });

  useDidShow(() => {
    if (!tabMap[activeKey].isLoaded) {
      getList(1);
    }
  });

  useEffect(() => {
    if (!tabMap[activeKey].isLoaded) {
      getList(1);
    }
  }, [activeKey]);

  const goGoodsDetail = (id) => {
    Taro.navigateTo({
      url: `/pages/goodsDetail/index?goods_id=${id}`,
    });
  };

  const collect = async (goods_id) => {
    const { result, status } = await api.customer_collection_collection({
      goods_id,
    });
    if (status === "ok") {
      getList(1);
      let collectIds=Taro.getStorageSync('collectIds')
      const index = collectIds.indexOf(goods_id)
      collectIds.splice(index,1)
      Taro.setStorageSync('collectIds',collectIds)
    }
  };

  const onClickSwiper = (e, id) => {
    console.log("e", e);
    if (e.text === "删除") {
      collect(id);
    }else{

    }
  };

  return (
    <View className="collect-list-page">
      {tabMap[activeKey].data.map((item) => {
        return (
          <AtSwipeAction
            key={item.id}
            className="swipter-wrapper"
            autoClose
            onClick={(e) => {
              onClickSwiper(e, item.id);
            }}
            options={[
              // {
              //   text: "分享",
              //   style: {
              //     backgroundColor: "#FD690A",
              //   },
              // },
              {
                text: "删除",
                style: {
                  backgroundColor: "#FC3A32",
                },
              },
            ]}
          >
            <GoodsItem
              {...item}
              className="collect-item"
              onClick={() => {
                goGoodsDetail(item.id);
              }}
            />
          </AtSwipeAction>
        );
      })}

      <ListStatusInfo
        total={tabMap[activeKey].total}
        dataLength={tabMap[activeKey].data.length}
        loading={loading}
      />
    </View>
  );
};

export default Index;
